<template>
	<view>
		<view class="member_scroll">
			<u-navbar leftText="返回" :fixed="false" :border="true">
				<view class="u-nav-slot dflex scrollLogo aic" slot="left">
					<u-icon name="arrow-left" size="16" @click="autoBack"></u-icon>
					<image :src="details.userinfo.avatar" class="w25 border_ccc" mode="scaleToFill"
						@click="toMemberIndex" :data-currentuid="topicCurrentUserId" v-if="details"></image>
					<text class="f14 fbold u-line-1" style="max-width: 120px;" @click="toMemberIndex"
						:data-currentuid="topicCurrentUserId">{{ details.userinfo.username || ''}}</text>
					<!-- 用户自己看不见关注按钮 -->
					<view v-if="details.isSelf === false">
						<view>
							<view class="f12 fbold small_follow_button_check" @click="cancel"
								v-if="details.isFollowing === true">
								已关注
							</view>
							<view class="f12 fbold small_follow_button" @click="followUser" v-else>
								关注+
							</view>
						</view>
					</view>
				</view>
				<view class="u-nav-slot dflex scrollLogo aic" slot="right">
					<u-icon name="more-dot-fill" size="16" @click="moreButton = true"></u-icon>
				</view>
			</u-navbar>
		</view>

		<view class="user_images p_relative" :style="{marginTop: customNavHeight + 'px;'}" @click="dbclikes">
			<u-swiper :list="details.links" :autoplay="false" indicator radius="0" indicatorMode="line" circular
				:bgImage="'https://aikm.cn/static/article_bg.png'" :bgSize="'cover'" indicatorActiveColor="#ffaf32"
				:height="autoHeight" imgMode="aspectFit"></u-swiper>
		</view>

		<view class="wrap_nb">
			<text class="fbold f16">{{ details.title || ''}}</text>
		</view>

		<view class="wrap_nb f14" style="line-height: 25px;">
			<text>{{ details.describe || ''}}</text>
		</view>

		<view class="tags">
			<block v-for="(item,index) in details.tags" :key="index">
				<text>#{{item.tag || ''}}</text>
			</block>
		</view>

		<text class="_createTime">发布于：{{checkTime(details.createTime) || ''}}</text>

		<view class="wrap_nb cflex">
			<u-line></u-line>
			<text class="f16 fbold mt12">0条评论</text>
		</view>

		<view class="all_comments wrap_ntb dflex jcc">
			<u-divider text="~End~"></u-divider>
		</view>

		<view class="article_bottom_ios dflex wrap" v-if="ios">
			<view class="article_share fg1">
				<u--input border="surround" placeholder="说点什么吧..." :disabled="true" disabledColor="#ffffff"
					shape="circle" prefixIcon="chat" type="text"></u--input>
			</view>
			<view class="article_message dflex aic">
				<view class="dflex aic" v-if="is_collection">
					<image src="../../static/video_page/shouc_yes.png" class="w25"></image>
					<text>1</text>
				</view>
				<view class="dflex aic" v-else>
					<image src="../../static/video_page/shouc_no.png" class="w25"></image>
					<text>1</text>
				</view>
				<view class="dflex aic" v-if="is_like">
					<image src="../../static/video_page/like_yes.png" class="w25"></image>
					<text>1</text>
				</view>
				<view class="dflex aic" v-else>
					<image src="../../static/video_page/like_no.png" class="w25"></image>
					<text>1</text>
				</view>
				<image src="../../static/video_page/pingl.png" class="w25"></image>
			</view>
		</view>

		<view class="article_bottom dflex wrap" v-else>
			<view class="article_share fg1" @click="openSendMessageBox">
				<u--input border="surround" placeholder="说点什么吧..." disabled="true" disabledColor="#ffffff"
					shape="circle" prefixIcon="chat" type="text"></u--input>
			</view>
			<view class="article_message dflex aic">
				<view class="dflex aic" v-if="is_collection">
					<image src="../../static/video_page/shouc_yes.png" class="w25"></image>
					<text>1</text>
				</view>
				<view class="dflex aic" v-else>
					<image src="../../static/video_page/shouc_no.png" class="w25"></image>
					<text>1</text>
				</view>
				<view class="dflex aic" v-if="is_like">
					<image src="../../static/video_page/like_yes.png" class="w25"></image>
					<text>1</text>
				</view>
				<view class="dflex aic" v-else>
					<image src="../../static/video_page/like_no.png" class="w25"></image>
					<text>1</text>
				</view>
				<image src="../../static/video_page/pingl.png" class="w25"></image>
			</view>
		</view>

		<u-action-sheet :actions="moreOption" :show="moreButton" :safeAreaInsetBottom="true" :closeOnClickOverlay="true"
			cancelText="取消" @close="moreButton = false" @select="moreSelect" :title="'操作'">
		</u-action-sheet>
		<u-modal :show="showDelete" title="删除确认" content="您确认要删除这篇瞬间吗？" :showCancelButton="true" @confirm="ensureDelete"
			@cancel="showDelete = false" @close="showDelete = false">
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		UserDynamicsDetails,
		isFollow,
		followUser,
		unfollowUser,
		deletePost
	} from '../../api/user.js';
	export default {
		data() {
			return {
				customNavHeight: '',
				//当前瞬间的发帖id
				topicCurrentUserId: '',
				is_followed: false,
				is_self: false,
				loginCheck: false,
				is_collection: false,
				is_like: false,
				type: 'topics',
				index: '',
				indicator: false,
				location_detail: '',
				cover: '',
				ios: '',
				autoHeight: '',
				moreButton: false,
				moreOption: [{
						name: "删除",
						option: "delete"
					},
					{
						name: "编辑",
						option: "edit"
					}
				],
				showDelete: false,
				details: {},
				id: ''
			}
		},
		onReachBottom: function() {
			this.$refs.reply.formIndexReachBottom()
		},
		onLoad: function(e) {
			if ('id' in e) {
				this.UserDynamicsDetails(e.id);
				this.id = e.id;
			}

			var sys = uni.getSystemInfoSync()
			this.autoHeight = 400
			this.customNavHeight = sys.statusBarHeight + 44

			//获取系统版本，给ios添加底部安全间隙，但是老版本ios间隙就太大了
			let platform = uni.getSystemInfoSync().platform

			if (platform == 'ios') {
				this.ios = true
			} else if (platform == 'android') {
				this.ios = false
			}
		},
		methods: {
			/**
			@method 动态操作
			**/
			moreSelect(e) {
				switch (e.option) {
					case 'delete':
						this.showDelete = true;
						break;
					case 'edit':

						break;
				}
			},
			/**
			@method 删除当前瞬间
			**/
			async ensureDelete() {
				try {
					const res = await deletePost({
						id: this.details._id
					});

					if (res.code === 200) {
						this.$refs.uToast.show({
							type: "default",
							title: "默认主题",
							message: "删除成功！",
							iconUrl: "https://uviewui.com/demo/toast/default.png",
							complete() {
								uni.reLaunch({
									url: '/pages/tabBar/Video/index'
								});
							},
						});
					}
				} catch (err) {
					console.log(err);
				}
			},
			/**
			@method 取消关注
			@param followingId → 被关注用户的 ID（你要关注的那个人）
			**/
			async cancel() {
				try {
					const _this = this;
					const res = await unfollowUser({
						followingId: this.userinfo.id,
					});

					if (res.code === 200) {
						this.$refs.uToast.show({
							type: "default",
							title: "默认主题",
							message: "取消成功！",
							iconUrl: "https://uviewui.com/demo/toast/default.png",
							complete() {

							},
						});
						this.UserDynamicsDetails(this.id);
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			/**
			@method 关注用户
			@param followerId → 当前登录用户的 ID（谁在点关注按钮）
				   followingId → 被关注用户的 ID（你要关注的那个人）
			**/
			async followUser() {
				try {
					const res = await followUser({
						followingId: this.userinfo.id,
					});

					if (res.code === 200) {
						this.$refs.uToast.show({
							type: "default",
							title: "默认主题",
							message: "关注成功！",
							iconUrl: "https://uviewui.com/demo/toast/default.png",
							complete() {

							},
						});
						this.UserDynamicsDetails(this.id);
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			/**
			@method 判断是否关注了当前用户
			**/
			async isFollow(id = '') {
				try {
					const res = await isFollow({
						userId: id
					});

					if (res.code === 200) {
						this.details = {
							...this.details,
							...res.data
						};
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			checkTime(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear(); // 2025
				const month = date.getMonth() + 1; // 5 (注意月份从0开始)
				const day = date.getDate(); // 7
				const hours = date.getHours(); // 20 (UTC+8)
				const minutes = date.getMinutes(); // 11
				return `${year < 10 ? `0${year}` : year }-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day} ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`
			},
			autoBack() {
				uni.reLaunch({
					url: '/pages/tabBar/Video/index'
				});
			},
			/** 
			@method 获取动态详情
			**/
			async UserDynamicsDetails(_id = '') {
				try {
					const res = await UserDynamicsDetails({
						id: _id
					});

					if (res.code === 200) {
						this.details = {
							...res.data
						};

						this.isFollow(res.data.userid._id);
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	._createTime {
		display: block;
		font-size: 26rpx;
		color: #888;
		margin-top: 15rpx;
		margin-left: 20rpx;
	}

	.tags {
		width: auto;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		margin-top: 10rpx;

		text {
			display: block;
			margin-right: 10rpx;
			color: #55aaff;
			letter-spacing: 2rpx;
		}
	}

	.article_button image {
		width: 25px;
		height: 25px;
	}

	.article_message image {
		margin: 0 5px 0 15px;
	}

	.article_comments_avatar image {
		width: 30px;
		height: 30px;
		border-radius: 30px;
	}

	.comments_reply {
		margin-left: 40px;
	}

	.all_comments {
		padding-bottom: 85px;
	}

	.article_bottom_ios {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 99;
		background-color: #fff;
		border-top: 1px solid #eee;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
	}

	.article_bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 99;
		background-color: #fff;
		border-top: 1px solid #eee;
		box-sizing: border-box;
		padding-bottom: 12px;
	}

	.reply_ico {
		font-size: 25px;
		margin-top: 5px;
	}

	.reply_ico text:nth-child(even) {
		margin: 0 5px;
	}

	.article_pop_comments_input {
		margin-bottom: 30px;
	}

	.tag_box text {
		background-color: #F6F6F6;
		color: #333;
		font-size: 14px;
		border: 1px solid #ccc;
		padding: 3px 7px;
		border-radius: 5px;
	}

	.member_topic_more {
		background-color: #000;
		opacity: 0.7;
		padding: 3px;
		border-radius: 30px;
	}

	.wrap {
		padding: 12px;
	}

	.wrap_nb {
		padding: 12px 12px 0 12px;
	}

	.wrap_nt {
		padding: 0 12px 12px 12px;
	}

	.wrap_ntb {
		padding: 0 12px;
	}

	.wrap_nlr {
		padding: 12px 0;
	}

	.dflex {
		display: flex;
	}

	.dflexwrap {
		display: flex;
		flex-wrap: wrap;
	}

	.jcsb {
		justify-content: space-between;
	}

	.jcsa {
		justify-content: space-around;
	}

	.jcc {
		justify-content: center;
	}

	.jcfe {
		justify-content: flex-end;
	}

	.jcfs {
		justify-content: flex-start;
	}

	.aic {
		align-items: center;
	}

	.ait {
		align-items: flex-start;
	}

	.cflex {
		display: flex;
		flex-direction: column;
	}

	.f10 {
		font-size: 10px;
	}

	.f12 {
		font-size: 12px;
	}

	.f14 {
		font-size: 14px;
	}

	.f15 {
		font-size: 15px;
	}

	.f16 {
		font-size: 16px;
	}

	.f18 {
		font-size: 18px;
	}

	.f20 {
		font-size: 20px;
	}

	.f22 {
		font-size: 22px;
	}

	.f24 {
		font-size: 24px;
	}

	.f26 {
		font-size: 26px;
	}

	.fbold {
		font-weight: bold;
	}

	.mt3 {
		margin-top: 3px;
	}

	.mt5 {
		margin-top: 5px;
	}

	.mt10 {
		margin-top: 10px;
	}

	.mt12 {
		margin-top: 12px;
	}

	.mb12 {
		margin-bottom: 12px;
	}

	.mb20 {
		margin-bottom: 20px;
	}

	.mt20 {
		margin-top: 20px;
	}

	.mt50 {
		margin-top: 50px;
	}

	.mt100 {
		margin-top: 100px;
	}

	.mr5 {
		margin-right: 5px;
	}

	.mr12 {
		margin-right: 12px;
	}

	.mr15 {
		margin-right: 15px;
	}

	.mr20 {
		margin-right: 20px;
	}

	.ml5 {
		margin-left: 5px;
	}

	.ml15 {
		margin-left: 15px;
	}

	.mr10 {
		margin-right: 10px;
	}

	.ml10 {
		margin-left: 10px;
	}

	.ml12 {
		margin-left: 12px;
	}

	.mb7 {
		margin-bottom: 7px;
	}

	.mb12 {
		margin-bottom: 12px;
	}

	.p20 {
		padding: 20px;
	}

	.p12 {
		padding: 12px;
	}

	.pempty {
		padding: 70px 12px;
	}

	.p6 {
		padding: 6px;
	}

	.p3 {
		padding: 3px;
	}

	.ptb6 {
		padding: 6px 0;
	}

	.plr20 {
		padding: 0 20px;
	}

	.plr12 {
		padding: 0 12px;
	}

	.pb12 {
		padding-bottom: 12px;
	}

	.pb6 {
		padding-bottom: 6px;
	}

	.pr12 {
		padding-right: 12px;
	}

	.pr24 {
		padding-right: 24px;
	}

	.scrollLogo image {
		width: 25px;
		height: 25px;
		border-radius: 25px;
		margin: 0 10px;
	}

	.small_follow_button,
	.small_follow_button_check {
		background: #ffaf32;
		border-radius: 25px;
		height: 25px;
		width: 50px;
		justify-content: center;
		line-height: 25px;
		text-align: center;
		border: 2px solid #333;
		margin-left: 5px;
	}

	.small_follow_button_check {
		background: #eee;
		border: 2px solid #333;
	}

	.normal_follow_button,
	.normal_follow_button_check {
		background: #ffaf32;
		border-radius: 25px;
		border: 2px solid #333;
		padding: 3px 7px;
		height: 20px;
		width: 60px;
		text-align: center;
		margin-left: 5px;
	}

	.normal_follow_button_check {
		background: #eee;
		border: 2px solid #333;
	}

	.fg1 {
		flex-grow: 1;
	}

	.w10 {
		width: 10px;
		height: 10px;
	}

	.w15 {
		width: 15px;
		height: 15px;
	}

	.w20 {
		width: 20px;
		height: 20px;
		border-radius: 20px;
	}

	.w25 {
		width: 25px;
		height: 25px;
		border-radius: 25px;
	}

	.w30 {
		width: 30px;
		height: 30px;
		border-radius: 30px;
	}

	.w40 {
		width: 40px;
		height: 40px;
		border-radius: 50px;
	}

	.w50 {
		width: 50px;
		height: 50px;
		border-radius: 60px;
	}

	.w60 {
		width: 60px;
		height: 60px;
	}

	.w75 {
		width: 75px;
		height: 75px;
	}

	.w105 {
		width: 105px;
		height: 105px;
	}

	.w150 {
		width: 150px;
		height: 150px;
	}

	.cffffff {
		color: #fff;
	}

	.ca3a3a3 {
		color: #A3A3A3;
	}

	.c3971e0 {
		color: #3971e0;
	}

	.c333333 {
		color: #333333;
	}

	.c000000 {
		color: #000000;
	}

	.cc0c4cc {
		color: #c0c4cc;
	}

	.dafault_button {
		color: #000;
		border-radius: 50px;
		background: #FFD84A;
		font-size: 16px;
	}

	.main_bg {
		background: #FFD84A;
	}

	.main_bg_blue {
		background: #3971e0;
	}

	.main_bg_reversal {
		background: #fff;
		border: 1px solid #707070;
	}

	.main_color {
		color: #333;
	}

	.border-aroud {
		border-radius: 100px;
	}

	.taligncenter {
		text-align: center;
	}

	.talignright {
		text-align: right;
	}

	.empty_list {
		margin-top: 50px;
	}

	.line5 {
		width: 750rpx;
		height: 15rpx;
		background: #eee;
	}

	.lineheight20 {
		line-height: 20px;
	}

	.lineheight25 {
		line-height: 25px;
	}

	.share_pic {
		display: flex;
	}

	.share_pic image {
		height: 500px;
	}

	.share_button,
	.share_button_dy {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		padding: 15px 0;
	}

	.share_button_dy {
		justify-content: center;
	}

	.invit_button_only button {
		width: 100%;
	}

	.invit_button_only button:nth-child(1) {
		background-color: #FD6A21;
	}

	.share_box {
		width: 45%;
		display: flex;
		flex-direction: column;
		font-size: 14px;
		align-items: center;
		line-height: 35px;
	}

	.share_box image {
		width: 35px;
		height: 35px;
	}

	.share_box_dy {
		display: flex;
		flex-direction: row;
		font-size: 14px;
		align-items: center;
		line-height: 35px;
	}

	.share_box_dy image {
		width: 35px;
		height: 35px;
	}

	.p_fix {
		position: fixed;
	}

	.p_relative {
		position: relative;
	}

	.p_absolute {
		position: absolute;
	}

	.unread {
		width: 10px;
		height: 10px;
		border-radius: 7px;
		background-color: #ff0000;
		margin-right: 7px;
	}

	.bg_eee {
		background-color: #fafafa;
	}

	.bg_fff {
		background-color: #fff;
	}

	.bg_F6F7 {
		background-color: #F6F7FB;
	}

	.border_ccc {
		border: 1px solid #ccc;
	}

	.border_c3971e0 {
		border: 1px solid #3971e0;
	}

	.text_tag text {
		background-color: #F3F3F3;
		padding: 2px 4px;
		border-radius: 5px;
		margin-right: 5px;
	}

	.radius5 {
		border-radius: 5px;
	}

	.radius10 {
		border-radius: 10px;
	}

	.radius15 {
		border-radius: 15px;
	}

	.main_price_color {
		color: #DF4164;
	}

	.main_price_bg {
		background-color: #FFECEE;
	}

	.boxbb {
		box-sizing: border-box;
	}

	.textDelete {
		text-decoration: line-through;
	}

	.aifs {
		align-items: flex-start;
	}

	.aife {
		align-items: flex-end;
	}

	.aib {
		align-items: baseline;
	}

	.minmaxw60 {
		min-width: 60px;
		max-width: 60px;
	}

	.minmaxw100 {
		min-width: 100px;
		max-width: 100px;
	}

	.txt_auto_justify {
		width: 100%;
		display: block;
		text-align: justify;
		text-align-last: justify;
	}

	.border_bottom_eee {
		border-bottom: 1px solid #eee;
		width: 100%;
	}

	.border_top_eee {
		border-top: 1px solid #eee;
		width: 100%;
	}

	.normal_button {
		background-color: #ffaf32;
		border-radius: 25px;
		height: 25px;
		justify-content: center;
		line-height: 25px;
		text-align: center;
		border: 2px solid #333;
		margin-left: 5px;
		padding: 5px 15px;
	}

	.safe_buttom {
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	}

	.bottom_0 {
		bottom: 0;
	}

	.w100percent {
		width: 100%;
		box-sizing: border-box;
	}

	.zindex5 {
		z-index: 5;
	}

	.button_clear button::after {
		border: 0;
	}
</style>